<template>
	<div id="aside">
		<!-- <el-col :span="24">
				<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
					站点地图 -->
		 <!-- <el-menu-item index="1">
			<i class="el-icon-picture"></i>
			<router-link to='/index/map' @click.native="pull">站点地图</router-link>
		</el-menu-item> --> 

		<!-- 数据报表 -->
		<!-- <el-submenu index="2">
			<template slot="title">
				<i class="el-icon-document"></i>数据报表</template>
			<el-menu-item index="2-1">
				<router-link to='/index/data1' @click.native="pull">开门记录</router-link>
			</el-menu-item>
			<el-menu-item index="2-2">
				<router-link to='/index/data2' @click.native="pull">告警记录</router-link>
			</el-menu-item>
			<el-menu-item index="2-3">
				<router-link to='/index/data3' @click.native="pull">开门统计</router-link>
			</el-menu-item>
			<el-menu-item index="2-4">
				<router-link to='/index/data4' @click.native="pull">门锁统计</router-link>
			</el-menu-item>
		</el-submenu> -->

		<!-- 授权管理 -->
		<!-- <el-menu-item index="3">
			<i class="el-icon-information"></i>
			<router-link to='/index/powmanage' @click.native="pull">授权管理</router-link>
		</el-menu-item> -->

		<!-- 锁具管理 -->
		<!-- <el-menu-item index="4">
			<i class="el-icon-menu"></i>
			<router-link to='/index/toolmanage' @click.native="pull">锁具管理</router-link>
		</el-menu-item> -->

		<!-- 钥匙管理 -->
		<!-- <el-submenu index="5">
			<template slot="title">
				<i class="el-icon-message"></i>钥匙管理
			</template>
			<el-menu-item index="5-1">
				<router-link to='/index/localmanage1' @click.native="pull">电子钥匙管理</router-link>
			</el-menu-item>
			<el-menu-item index="5-2">
				<router-link to='/index/localmanage2' @click.native="pull">机械钥匙管理</router-link>
			</el-menu-item>
		</el-submenu> -->

		<!-- 系统管理 -->
		<!-- <el-submenu index="6">
			<template slot="title">
				<i class="el-icon-setting"></i>系统管理
			</template>
			<el-menu-item index="6-1">
				<router-link to='/index/sysmanage1' @click.native="pull">区域管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-2">
				<router-link to='/index/sysmanage2' @click.native="pull">机构管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-3">
				<router-link to='/index/sysmanage3' @click.native="pull">角色管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-4">
				<router-link to='/index/sysmanage4' @click.native="pull">用户管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-5">
				<router-link to='/index/sysmanage5' @click.native="pull">站点管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-6">
				<router-link to='/index/sysmanage6' @click.native="pull">设施管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-7">
				<router-link to='/index/sysmanage7' @click.native="pull">设备厂商管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-8">
				<router-link to='/index/sysmanage8' @click.native="pull">设备类型管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-9">
				<router-link to='/index/sysmanage9' @click.native="pull">公告管理</router-link>
			</el-menu-item>
			<el-menu-item index="6-10">
				<router-link to='/index/sysmanage10' @click.native="pull">日志查询</router-link>
			</el-menu-item>
		</el-submenu>
		</el-menu> -->
		<!-- </el-col> -->
		<ul>
			<router-link tag="li" to='/index/map' @click.native="pull">
				<i class="el-icon-picture"></i>
				站点地图
			</router-link>
			<li>
				<i class="el-icon-document"></i> 数据报表 
				<span> ∨ </span>	
				<ul class="ul_active">
					<li>
						<router-link to='/index/data1' @click.native="pull">开门记录</router-link>
					</li>
					<li>
						<router-link to='/index/data2' @click.native="pull">告警记录</router-link>
					</li>
					<li>
						<router-link to='/index/data3' @click.native="pull">开门统计</router-link>
					</li>
					<li>
						<router-link to='/index/data4' @click.native="pull">门锁统计</router-link>
					</li>
				</ul>
			</li>
			<router-link tag="li" to='/index/powmanage' @click.native="pull">
				<i class="el-icon-information"></i>
				授权管理
			</router-link>
				
			<router-link tag="li" to='/index/toolmanage' @click.native="pull">
				<i class="el-icon-menu"></i>
				锁具管理
			</router-link>
			<li>
				<i class="el-icon-message"></i> 钥匙管理
				<span> ∨ </span>
				<ul>
					<li>
						<router-link to='/index/localmanage1' @click.native="pull">电子钥匙管理</router-link>
					</li>
					<li>
						<router-link to='/index/localmanage2' @click.native="pull">机械钥匙管理</router-link>
					</li>
				</ul>
			</li>
			<li>
				<i class="el-icon-setting"></i> 系统管理
				<span> ∨ </span>
				<ul>
					<li>
						<router-link to='/index/sysmanage1' @click.native="pull">区域管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage2' @click.native="pull">机构管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage3' @click.native="pull">角色管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage4' @click.native="pull">用户管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage5' @click.native="pull">站点管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage6' @click.native="pull">设施管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage7' @click.native="pull">设备厂商管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage8' @click.native="pull">设备类型管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage9' @click.native="pull">公告管理</router-link>
					</li>
					<li>
						<router-link to='/index/sysmanage10' @click.native="pull">日志查询</router-link>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data(){
		return{
			barShow:false
		}
	},
	methods: {
		// handleOpen(key, keyPath) {
		// 	console.log(key, keyPath);
		// },
		// handleClose(key, keyPath) {
		// 	console.log(key, keyPath);
		// },
		pull(event) {
			event.stopPropagation();
			$('#aside').animate({ width: 0 }, function() {
				$('#aside').css({ display: 'none' });
				$('#main_right').css({ width: 98 + '%' })
			});
			this.$store.dispatch("showPull")
		}
	},
	mounted(){
		var self=this;
		$(".ul_active").show().parent("li").addClass("cur");
		$("#aside>ul>li").on("click",function(){
			$(this).children("ul").slideToggle().end().siblings("li").find("ul").slideUp();
			$(this).addClass("cur").siblings('li').removeClass("cur");
		});
	}
}
</script>


<style scoped>
#aside {
	float: left;
	width: 15%;
	margin-bottom: 64px;
	overflow: hidden;
	text-align: center;
	background-color: whitesmoke;
}
#aside>ul{
	border-right: 1px solid #ccc;
}
#aside ul>li {
	line-height: 36px;
	width: 100%;
	border-bottom: 1px solid #ccc;
	position: relative;
	cursor: pointer;
}
#aside ul>li.cur{
	background-color: darkgrey;
}
#aside ul>li>span{
	position: absolute;
	right: 20px;
}
#aside ul>li>ul{
	display: none;
}
#aside ul>li>ul>li{
	border:none;
	border-top:1px solid #ccc;
}
#aside a,#aside li {
	color: #000;
}
</style>